<template>
  <div>
    <el-row>
      <el-col :span="12">
        <h4 class="statisticsUserModel2H4">出行年龄段统计（近三个月）</h4>
        <div id="userEchart3"></div>
      </el-col>
      <el-col :span="12">
        <h4 class="statisticsUserModel2H4">男女比例（近三个月）</h4>
        <div id="userEchart4"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  watch: {
    userEchartData3(a, b) {
      this.userEchartData3 = a;
      this.carrie3(a);
    },
    userEchartData4(a, b) {
      this.userEchartData4 = a;
      this.carried4(a);
    },
  },
  props: ["userEchartData3", "userEchartData4"],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    ObjectArr(data) {
      var arrName = [];
      var arrValue = [];
      data.forEach((e) => {
        for (var i in e) {
          arrName.push(i);
          arrValue = Object.values(e);
        }
      });
      return [arrName, arrValue];
    },
    carrie3(a) {
      var echart2 = echarts.init(document.querySelector("#userEchart3"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.optionData(a), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    carried4(a) {
      var echart2 = echarts.init(document.querySelector("#userEchart4"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.optionData2(a), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    optionData(arr) {
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: arr.map((e) => {
              return e.AgeRange;
            }),
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            barWidth: "25%",
            data: arr.map((e) => {
              return e.PeopleNum;
            }),
                        itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#123597", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "#CE9FFC", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#97ABFF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };

      return option;
    },

    optionData2(a) {
      function GetPercent(num, total) {
        num = parseFloat(num);
        total = parseFloat(total);
        if (isNaN(num) || isNaN(total)) {
          return "-";
        }
        return total <= 0
          ? "0%"
          : Math.round((num / total) * 10000) / 100.0 + "%";
      }
      const res = [
        {
          label: "男",
          value: a.male,
        },
        {
          label: "女",
          value: a.female,
        },
      ];
      const totalNum = res[0].value + res[1].value;
      const border =
        "";
      const man =
        "";
      const woman =
        "";
      const color = ["#97ABFF", "rgba(196,36,255,1)"];
      const data = [];
      for (let i = 0; i < res.length; i++) {
        data.push(
          {
            value: res[i].value,
            name: res[i].label,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: res[0].value / 10,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var option = {
        color,
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: border,
                width: 300,
                height: 300,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
            {
              type: "image",
              z: 3,
              style: {
                image: man,
                width: 85,
                height: 120,
              },
              left: "36%",
              top: "center",
            },
            {
              type: "image",
              z: 3,
              style: {
                image: woman,
                width: 85,
                height: 120,
              },
              right: "36%",
              top: "center",
            },
          ],
        },
        tooltip: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [175, 180],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  fontSize: 24,
                  formatter(params) {
                    return params.name
                      ? params.name +
                          "\n" +
                          params.value +
                          "人" +
                          "\n" +
                          GetPercent(params.value, totalNum)
                      : "";
                  },
                },
                labelLine: {
                  width: 4,
                  length: 30,
                  length2: 50,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data,
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style scoped>
#userEchart3,
#userEchart4 {
  width: auto;
  height: 400px;
}
.statisticsUserModel2H4 {
  margin-left: 25px;
  padding: 0;
  height: 0;
}
</style>